<md-toolbar layout-gt-md="row" layout-md="column" layout-align="center center" md-theme="red">
    <md-button href="https://github.com/mbitson/mcg" class="gh-btn md-raised md-accent" target="_blank" aria-label="To Github">
        <md-tooltip>To GitHub</md-tooltip>
        <img src="/images/gh.png" alt="GitHub" name="GitHub Link" />
    </md-button>
    <span class="logo-text">Material Design<span class="logo-subhead">Palette Generator</span></span>
    <div flex class="bright-text" style="margin-left: 30px;">
        <md-input-container>
            <label>Theme Name</label>
            <input class="md-accent" ng-model="theme.name">
        </md-input-container>
    </div>
	<div flex layout="row" layout-align="end center">
        <div class="md-accent bright-text">
            <md-button class="md-accent" ng-click="showAbout()" style="margin-right: 15px;" aria-label="About This Tool">
                <md-tooltip>About This Tool</md-tooltip>
                <ng-md-icon icon="info" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
        </div>
        <div class="md-accent bright-text">
            <md-button class="md-accent" ng-click="showThemeCode()" style="margin-right: 15px;" aria-label="Copy AngularJS Code">
                <md-tooltip>Copy AngularJS Code / Export</md-tooltip>
                <ng-md-icon icon="file_download" size="34" style="fill:#ffffff;"></ng-md-icon>
            </md-button>
        </div>
        <div class="md-accent bright-text">
            <md-button class="md-accent" ng-click="showImport()" style="margin-right: 15px;" aria-label="Import Theme">
                <md-tooltip>Import</md-tooltip>
                <ng-md-icon icon="file_upload" size="34" style="fill:#ffffff;"></ng-md-icon>
            </md-button>
        </div>
        <div class="md-accent bright-text">
            <md-button class="md-accent" ng-click="addBasePalette()" style="margin-right: 15px;" aria-label="Add Palette">
                <md-tooltip>Add Palette</md-tooltip>
                <ng-md-icon icon="add_box" size="34" style="fill:#ffffff;"></ng-md-icon>
            </md-button>
        </div>
        <div class="md-accent bright-text">
            <md-button class="md-accent" ng-click="showDemo()" style="margin-right: 15px;" aria-label="Show Demo">
                <md-tooltip>Run Demo</md-tooltip>
                <ng-md-icon icon="play_circle_fill" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
        </div>
        <div class="md-accent bright-text">
            <md-button class="md-accent" ng-click="showSettings()" style="margin-right: 15px;" aria-label="Show Settings">
                <md-tooltip>Settings</md-tooltip>
                <ng-md-icon icon="settings_applications" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
        </div>
    </div>
</md-toolbar>
<md-content class="md-dark-theme">
	<md-content class="palette" ng-repeat="(paletteKey, palette) in palettes">
		<md-toolbar class="md-accent" layout="row" layout-align="center center" style="padding-right: 15px;">
			<div class="md-toolbar-tools">
				<md-input-container>
                    <label>Palette Name</label>
					<input ng-model="palette.name">
				</md-input-container>
			</div>
			<span flex></span>
            <md-button class="btn-icon-only" ng-click="showPaletteCode(palette)" aria-label="View Code">
                <md-tooltip>View Code</md-tooltip>
                <ng-md-icon icon="content_paste" size="24"></ng-md-icon>
            </md-button>
            <md-button class="btn-icon-only" ng-click="deletePalette(paletteKey)" aria-label="Delete Palette">
                <md-tooltip>Delete Palette</md-tooltip>
                <ng-md-icon icon="remove_circle" size="24"></ng-md-icon>
            </md-button>
            <spectrum-colorpicker ng-model="palette.base" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 250, 'blur': 0} }" format="'hex'" options="{preferredFormat: 'hex', showInput: true, showPalette: true, palette:defaultPalette }" ng-change="calcPalette(paletteKey)"></spectrum-colorpicker>
        </md-toolbar>
		<md-list flex class="palette-colors spaced">
		    <md-list-item flex class="light-canvas" ng-repeat="color in palette.colors">
		        <div class="palette-color" style="background-color:{{color.hex}};" ng-class="{'palette-color-light': !color.darkContrast, 'palette-color-dark': color.darkContrast}">
		            <span class="name color-text" ng-bind="color.name"></span>
		            <span ng-bind="color.hex" class="palette-color-hex color-text"></span>
		            <a class="palette-color-hex color-text" href="http://colorhexa.com/{{color.hex.replace('#', '')}}" target="_blank">
                        <ng-md-icon icon="open_in_new" size="12" style="fill:#000; opacity:0.5"></ng-md-icon>
                        <md-tooltip>Open Color In Colorhexa.com for Details</md-tooltip>
                    </a>
                    <div class="palette-color-mutators">
                        <!-- Removed lighten and darken buttons until saturation issues are worked out. -->
                        <spectrum-colorpicker ng-model="color.hex" format="'hex'" options="{preferredFormat: 'hex', showInput: true, showPalette: true, palette:defaultPalette }"></spectrum-colorpicker>
                    </div>
                    <div class="palette-color-contrast" ng-click="color.darkContrast = !color.darkContrast">
                      <md-tooltip>Toggle contrast</md-tooltip>
                    </div>
		        </div>
		    </md-list-item>
		</md-list>
	</md-content>
    <md-fab-speed-dial md-open="dialOpen" class="bright-text md-scale" md-direction="left">
        <md-fab-trigger>
            <md-button aria-label="menu" class="md-fab md-warn">
                <ng-md-icon icon="menu" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
        </md-fab-trigger>
        <md-fab-actions>
            <md-button class="md-accent" md-visible="dialTooltipOpen" ng-click="showSettings()" style="margin-right: 15px;" aria-label="Show Settings">
                <md-tooltip>Settings</md-tooltip>
                <ng-md-icon icon="settings_applications" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
            <md-button class="md-accent" md-visible="dialTooltipOpen" ng-click="showDemo()" style="margin-right: 15px;" aria-label="Show Demo">
                <md-tooltip>Run Demo</md-tooltip>
                <ng-md-icon icon="play_circle_fill" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
            <md-button class="md-accent" md-visible="dialTooltipOpen" ng-click="addBasePalette()" style="margin-right: 15px;" aria-label="Add Palette">
                <md-tooltip>Add Palette</md-tooltip>
                <ng-md-icon icon="add_box" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
            <md-button class="md-accent" md-visible="dialTooltipOpen" ng-click="showImport()" style="margin-right: 15px;" aria-label="Import Theme">
                <md-tooltip>Import</md-tooltip>
                <ng-md-icon icon="file_upload" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
            <md-button class="md-accent" md-visible="dialTooltipOpen" ng-click="showThemeCode()" style="margin-right: 15px;" aria-label="Copy AngularJS Code">
                <md-tooltip>Copy AngularJS Code / Export</md-tooltip>
                <ng-md-icon icon="file_download" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
            <md-button class="md-accent" md-visible="dialTooltipOpen" ng-click="showAbout()" style="margin-right: 15px;" aria-label="About This Tool">
                <md-tooltip>About This Tool</md-tooltip>
                <ng-md-icon icon="info" size="34" style="fill:#fff;"></ng-md-icon>
            </md-button>
        </md-fab-actions>
    </md-fab-speed-dial>
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-4dp settings" md-component-id="settings">
    <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">App Settings</h1>
        <span class="md-mcg-notice">Settings will be saved as cookies within your browser.</span>
    </md-toolbar>
    <md-content ng-controller="SettingsCtrl" layout-padding layout="column">
        <form layout="column" layout-align="start stretch">
            <h2 class="md-title">Color Generation Algorithm</h2>
            <md-input-container>
                <md-select ng-model="settings.algorithm">
                    <md-option ng-repeat="algorithm in settings.algorithms" ng-value="algorithm">
                        {{algorithm.charAt(0).toUpperCase()+algorithm.slice(1)}}
                    </md-option>
                </md-select>
            </md-input-container>
            <span class="md-input-desc"><strong>Note:</strong>
	            <ul>
		            <li>"Traditional" is the original MCG logic. It creates a lower contrast palette.</li>
	                <li>"Constantin" is the logic that was developed based on the outline from <a href="http://stackoverflow.com/questions/28503998/how-to-create-custom-palette-with-custom-color-for-material-design-app/36229022#36229022">here</a>. It creates a higher contrast palette.</li>
	                <li>"Buckner" is a slight variation in "Constantin" focusing on the A100 - A700 hues.</li>
	            </ul>
            </span>
        </form>
        <span flex></span>
        <md-button ng-click="close()" class="md-primary">
            Close Settings
        </md-button>
    </md-content>
</md-sidenav>